<template>
	<view class="container">
		<!-- 标题 -->
		<view class="title">
			<h2>重置密码</h2>
		</view>

		<!-- 表单区域 -->
		<u--form class="form-container" :model="model1" :rules="rules" ref="uForm" errorType="toast">
			<!-- 手机号输入 -->
			<u-form-item class="input-wrapper" prop="user.phone">
				<u-input v-model="model1.user.phone" placeholder="请输入手机号" clearable class="rounded-input"
					shape="circle">
					<template #prefix><!-- 图标 -->
						<u-icon name="phone" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>

			<!-- 新密码输入 -->
			<u-form-item class="input-wrapper" prop="user.newPassword">
				<u-input v-model="model1.user.newPassword" placeholder="请输入新密码" clearable password class="rounded-input"
					shape="circle">
					<template #prefix><!-- 图标 -->
						<u-icon name="lock" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>

			<!-- 确认新密码输入 -->
			<u-form-item class="input-wrapper" prop="user.confirmPassword">
				<u-input v-model="model1.user.confirmPassword" placeholder="请确认新密码" clearable password
					class="rounded-input" shape="circle">
					<template #prefix><!-- 图标 -->
						<u-icon name="lock" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>


			<!-- 验证码输入 -->
			<u-form-item class="input-wrapper code-input" prop="user.verificationCode">
				<u-input v-model="model1.user.verificationCode" placeholder="请输入验证码" clearable class="rounded-input"
					shape="circle">
					<template #prefix style="position: relative;">
						<u-icon name="email" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
				<u-button @click="getVerificationCode" type="primary" size="mini" plain :disabled="codeDisabled"
					class="code-btn" shape="circle">
					{{ model1.user.codeButtonText }}
				</u-button>
			</u-form-item>
			<!-- 确定修改按钮 -->
			<u-button @click="handleResetPassword" type="primary" shape="circle" class="reset-btn" :loading="loading">
				确定修改
			</u-button>

		</u--form>
	</view>
</template>


<script>
	import {
		restPasswordApi
	} from '../../../api/loginModel/loginModel';
	export default {
		data() {
			return {
				model1: {
					user: {
						phone: '',
						newPassword: '',
						confirmPassword: '',
						verificationCode: '',
						codeDisabled: false,
						codeButtonText: '获取验证码',
						countdown: 60,
						loading: false,
					}
				},
				restPasswordData: {
					telephone: "",
					password: ""
				},
				rules: {

					'user.newPassword': {
						type: 'string',
						required: true,
						message: '请填写密码',
						//change：字段值发生变化时校验   blur：输入框失去焦点时触发
						trigger: ['blur', 'change']
					},
					'user.confirmPassword': {
						required: true,
						message: '请确认新密码',
						trigger: ['change', 'blur'],
					},
					'user.phone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						//change：字段值发生变化时校验   blur：输入框失去焦点时触发
						trigger: ['blur', 'change']
					},

					'user.verificationCode': {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},

		methods: {
			getVerificationCode() {
				if (!this.model1.user.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.model1.user.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}

				// 这里调用获取验证码的API
				// 示例：this.$api.sendSmsCode({ phone: this.phone })

				// 模拟发送成功
				uni.showToast({
					title: '验证码已发送'
				});
				this.startCountdown();
			},

			// 开始倒计时
			startCountdown() {
				this.codeDisabled = true;
				let timer = setInterval(() => {
					this.model1.user.countdown--;
					this.model1.user.codeButtonText = `${this.model1.user.countdown}s`;

					if (this.model1.user.countdown <= 0) {
						clearInterval(timer);
						this.model1.user.codeDisabled = false;
						this.model1.user.codeButtonText = '获取验证码';
						this.model1.user.countdown = 60;
					}
				}, 1000);
			},
			beforeDestroy() {
				// 组件销毁时清除定时器
				clearInterval(this.timer);
			},

			handleResetPassword() {

				this.$refs.uForm.validate().then(res => {
					// 假装比对验证码，一致后执行下边的操作

					if (this.model1.user.newPassword !== this.model1.user.confirmPassword) {
						uni.$u.toast("两次输入的密码不一致");
					} else {
						// 点击发送重置请求
						this.restPasswordData.password = this.model1.user.newPassword
						this.restPasswordData.telephone = this.model1.user.phone
						// 调用重置密码的接口
						restPasswordApi(this.restPasswordData).then((res) => {
							if (res.code == 200) {
								// 修改成功
								uni.showToast({
									title: '修改成功',
									icon: 'none', // 使用 'none' 避免默认的对勾图标
									duration: 2000 // 显示时间 2 秒
								});
								setTimeout(() => {
									this.goToLogin();
								}, 1500);

							} else {
								// 修改失败
								uni.showToast({
									title: res.msg,
									icon: 'none', // 使用 'none' 避免默认的对勾图标
									duration: 2000 // 显示时间 2 秒
								});
								console.log(res.msg)
							}
						})
					}

				}).catch(errors => {
					if (this.model1.user.newPassword !== this.model1.user.confirmPassword) {
						uni.$u.toast("两次输入的密码不一致");
					} else {
						uni.$u.toast(errors[0].message);
					}

				});

			},
			// 跳转到登录页
			goToLogin() {
				uni.redirectTo({
					url: '/pages/loginModel/login/login'
				});
			},

		}
	}
</script>


<style lang="scss" scoped>
	/deep/ .u-button--plain.data-v-3bf2dba7 {
		position: absolute;
		width: 70px;
		left: 285px;
		bottom: 437px;
		z-index: 9;
	}

	.container {
		padding: 40rpx;
		min-height: 100vh;
		background-color: #fff;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin: 40rpx 0rpx;
		color: #333;
	}

	.form-container {
		padding: 0 30rpx;
	}

	.input-wrapper {

		position: relative;

		.rounded-input {
			background-color: #fff;
			border-radius: 50rpx;
			padding: 0 30rpx;
			height: 100rpx;
		}
	}

	.code-input {
		display: flex;
		align-items: center;

		.rounded-input {
			flex: 1;
			margin-right: 20rpx;
		}

		.code-btn {
			width: 200rpx;
			height: 90rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			white-space: nowrap;
			border: 1px solid #dcdfe6;
		}
	}

	.reset-btn {
		margin-top: 70rpx;
		height: 100rpx;
		font-size: 32rpx;
		background-color: #2979ff;
	}
</style>